<template>
  <div class="article-create">
    <h2>创建文章</h2>
    <form @submit.prevent="handleSubmit" class="create-form">
      <div class="form-item">
        <label>标题：</label>
        <input type="text" v-model="article.title" required />
      </div>
      <div class="form-item">
        <label>简介：</label>
        <textarea v-model="article.summary" rows="3" required placeholder="请输入文章简介，最多200字" maxlength="200"></textarea>
      </div>
      <div class="form-item">
        <label>分类：</label>
        <select v-model="article.category" required>
          <option value="">请选择分类</option>
          <option value="技术">技术</option>
          <option value="生活">生活</option>
          <option value="随笔">随笔</option>
          <option value="美食">美食</option>
          <option value="旅游">旅游</option>
          <option value="音乐">音乐</option>
          <option value="电影">电影</option>
          <option value="读书">读书</option>
          <option value="其他">其他</option>
        </select>
      </div>
      <div class="form-item">
        <label>内容：</label>
        <textarea v-model="article.content" rows="15" required class="content-editor"></textarea>
      </div>
      <div class="form-actions">
        <button type="submit" :disabled="isSubmitting">
          {{ isSubmitting ? '发布中...' : '发布文章' }}
        </button>
        <button type="button" class="btn-cancel" @click="$router.push('/')">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { createBlog } from '../api/blog'

const router = useRouter()
const isSubmitting = ref(false)
const article = ref({
  title: '',
  summary: '',
  category: '',
  content: ''
})

const handleSubmit = async () => {
  if (isSubmitting.value) return
  isSubmitting.value = true
  
  try {
    console.log('Submitting article:', article.value)
    const response = await createBlog(article.value)
    console.log('Create response:', response)
    
    if (response.code === 200) {
      alert('发布成功')
      router.push('/')
    } else {
      alert('发布失败：' + response.msg)
    }
  } catch (error) {
    console.error('Create error:', error)
    alert('发布失败：' + error.message)
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.article-create {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.create-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

input, textarea, select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.content-editor {
  min-height: 300px;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.6;
  resize: vertical;
}

button {
  padding: 10px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

label {
  font-weight: bold;
  color: #333;
}

select {
  height: 38px;
}
</style> 